import React from 'react';
import PageTitle from 'component/page-title/index.jsx';
import CategorySelector from './category-selector.jsx';
import FileUploader from 'util/file-uploader/index.jsx';
import RichEditor from 'util/rich-editor/index.jsx'
import './save.scss'

import MUtil from 'util/mm.jsx'
const __mm=new MUtil();

import Product from 'service/product-service.jsx'
const __product=new Product();

class ProductSave extends React.Component{
    constructor(props){
        super(props);
        this.state={
            id:this.props.match.params.pid,
            name:'',
            subtitle:'',
            categoryId:0,
            parentCategoryId:0,
            subImages:[],
            price:'',
            stock:'',
            detail:'',
            status:1 //商品状态1:在售
        }
    }
    componentDidMount(){
        this.loadProduct();
    }
    //加载商品详情
    loadProduct(){
        //有id表示编辑功能
        if(this.state.id){
            __product.getProduct(this.state.id).then(res=>{
                let images=res.subImages.split(',');
                res.subImages = images.map((imgUri)=>{
                    return {
                        uri:imgUri,
                        url:res.imageHost+imgUri
                    }
                });
                res.defaultDetail=res.detail;
                this.setState(res)
            },errMsg=>{
                __mm.errorTips(errMsg);
            })
        }
    }
    onCategoryChange(categoryId,parentCategoryId){
        this.setState({
            categoryId:categoryId,
            parentCategoryId:parentCategoryId
        })
    }
    //上传图片成功
    onUploadSuccess(res){
        let subImages=this.state.subImages;
        subImages.push(res);
        this.setState({
            subImages:subImages
        })
    }
    //上传图片失败
    onUploadError(errorMsg){
        __mm.errorTips(errorMsg);
    }
    //删除图片
    onImageDelete(e){
        let index=parseInt(e.target.getAttribute('index')),
            subImages=this.state.subImages;
        subImages.splice(index,1);
        this.setState({
            subImages:subImages
        })
    }
    //富文本编辑器的变化
    onRichEditorChange(value){
        this.setState({
            detail:value
        });
    }
    //简单字段的改变，比如商品名称，描述，价格，库存
    onValueChange(e){
        let name=e.target.name,
            value=e.target.value.trim();
        this.setState({
            [name]:value
        })
    }
    getSubImaghesString(){
        return this.state.subImages.map((image)=>image.uri).join(',')
    }
    //提交表单
    onSubmit(e){
        let product={
            name:this.state.name,
            subtitle:this.state.subtitle,
            categoryId:parseInt(this.state.categoryId),
            subImages:this.getSubImaghesString(),
            price:parseFloat(this.state.price),
            stock:parseInt(this.state.stock),
            detail:this.state.detail,
            status:this.state.status
        },
        productCheckResult=__product.checkProduct(product);
        if(this.state.id){
            product.id=this.state.id;
        }
        //表单验证成功
        if(productCheckResult.status){
            __product.saveProduct(product).then((res)=>{
                __mm.successTips(res);
                this.props.history.push('/product/index');
            },(errMsg)=>{
                __mm.errorTips(errMsg);
            })
        }
        //表单验证失败
        else{
            __mm.errorTips(productCheckResult.msg);
        }

    }
    render(){
        return(
            <div id="page-wrapper">
                <PageTitle title={this.state.id?'编辑商品':'添加商品'} />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control" name="name" value={this.state.name} onChange={(e)=>{this.onValueChange(e)}} placeholder="请输入商品名称" />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control" name="subtitle" value={this.state.subtitle} onChange={(e)=>{this.onValueChange(e)}} placeholder="请输入商品描述" />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CategorySelector categoryId={this.state.categoryId} parentCategoryId={this.state.parentCategoryId} onCategoryChange={(categoryId,parentCategoryId)=>this.onCategoryChange(categoryId,parentCategoryId)} />
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品价格</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control" name="price" value={this.state.price} onChange={(e)=>{this.onValueChange(e)}} placeholder="请输入商品价格" />
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control" name="stock" value={this.state.stock} onChange={(e)=>{this.onValueChange(e)}} placeholder="请输入商品库存" />
                                <span className="input-group-addon">件</span>
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品图片</label>
                        <div className="col-md-10 file-upload-con">
                            {
                                this.state.subImages.length ? this.state.subImages.map(
                                    (image,index)=>(
                                        <div key={index} className="uploadImg">
                                            <img src={image.url} /><i className="fa fa-close" index={index} onClick={(e)=>{this.onImageDelete(e)}}></i>
                                        </div>
                                    ))
                                    :
                                    (<div>请上传图片</div>)
                            }
                            <FileUploader onSuccess={(res)=>{this.onUploadSuccess(res)}} onError={(err)=>{this.onUploadError(err)}} />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        <div className="col-md-10">
                            <RichEditor detail={this.state.detail} defaultDetail={this.state.defaultDetail} onValueChange={(value)=>this.onRichEditorChange(value)} />
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="submit" className="btn btn-primary" onClick={(e)=>this.onSubmit(e)}>提交</button>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}

export default ProductSave;